/*
 *
 * (c) Copyright Ascensio System Limited 2010-2023
 * 
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 * http://www.apache.org/licenses/LICENSE-2.0
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 *
*/


@import "params.less";

#settings {
    @border-width: 1px;
    @border: @border-width solid @border-color;

    .settings-box {
        margin-top: 16px;

        [id^=state] {
            img {
                margin: 0 8px;
                vertical-align: middle;
            }
        }

        .custom-status {
            .header-base-small {
                font-size: 16px;
                margin-top: 12px;
            }
        }

        .grid-page {
            display: -ms-grid;
            display: grid;
            grid-template-columns: 16px 32px 1fr 2fr 32px;
            grid-template-rows: 40px;
            margin-left: -16px;

            & > div {
                display: flex;
                justify-content: center;
                align-items: center;

                &:not(:first-child) {
                    border-bottom: @border;
                }

                &:first-child {
                    background-color: @body-color;
                    background-image: url("/Products/CRM/App_Themes/default/images/drag.png");
                    background-position: center center;
                    background-repeat: no-repeat;
                    border-left: 1px solid @border-color;
                    border-bottom-left-radius: 3px;
                    border-top-left-radius: 3px;
                    -moz-border-radius-bottomleft: 3px;
                    -moz-border-radius-topleft: 3px;
                    -webkit-border-top-left-radius: 3px;
                    -webkit-border-bottom-left-radius: 3px;
                    cursor: move;
                    visibility: hidden;
                }

                &:nth-child(3), &:nth-child(4) {
                    font-size: 12px;
                    justify-content: flex-start;

                    span {
                        margin-left: 4px;
                    }
                }

                &:nth-child(3) {
                    font-weight: bold;
                }
            }

            & ~ .grid-page:not(.ui-sortable-helper) {
                & > div:not(:first-child) {
                    border-top: none;
                }

                &:hover > div:first-child {
                    margin-top: -@border-width/2;
                }
            }

            &, &.ui-sortable-placeholder + .grid-page:not(.ui-sortable-helper), &.ui-sortable-helper + .grid-page {
                & > div:not(:first-child) {
                    border-top: @border;

                    img {
                        width: 16px;
                        height: 16px;
                    }
                }
            }

            &.ui-sortable-placeholder + .grid-page:not(.ui-sortable-helper), &.ui-sortable-helper + .grid-page {
                & > div:not(:first-child) {
                    margin-top: -@border-width/2;
                }
            }

            &:hover {
                background-color: @body-color-selected;

                & > div:first-child {
                    visibility: visible;
                }
            }
        }
    }

    .folderSelectorBox {
        input {
            height: 20px;
            margin-right: 4px;
            vertical-align: middle;
            width: 400px;
        }
    }
}

@media (min-width: 1200px) {
    #settings .settings-box .grid-page {
        margin-left: 0;
    }
}

.editStatus {
    .color {
        width: 16px;
        height: 16px;
        cursor: pointer;
    }

    .commonActionPanel {
        display: block;

        & > div:first-child {
            display: grid;
            grid-template-columns: repeat(2, 1fr);

            div {
                display: flex;

                span {
                    margin-left: 4px;
                }

                img {
                    height: 16px;
                    width: 16px;
                }
            }

            #changeColor div {
                .color()
            }
        }

        & > div:nth-child(4) {
            span {
                margin-left: 4px;
            }
        }
    }

    #popup_colorPanel > div:first-child {
        display: grid;
        grid-gap: 4px;
        grid-template-columns: repeat(8, 1fr);
        grid-template-rows: repeat(2, 16px);
        margin: 4px;

        div {
            .color();
        }
    }

    #popup_iconPanel > div:first-child {
        display: grid;
        grid-gap: 8px;
        grid-template-columns: repeat(5, 1fr);
        grid-template-rows: 16px 16px 20px;
        margin: 4px;

        img {
            .color();
        }

        div:last-child {
            grid-column-start: 1;
            grid-column-end: -1;

            [type^=file] {
                display: none;
            }
        }
    }

    #popup_categoryPanel > div:first-child {
        display: grid;
        grid-gap: 8px;
        grid-template-rows: 16px;
        margin: 4px;

        div {
            cursor: pointer;
        }
    }
}